window.onload = () =>
{
    var app = new App();
    app.start();
}

class App
{
    root: HTMLDivElement | null = null;
    rootCanvas: HTMLCanvasElement | null = null;
    divDialog: HTMLDivElement | null = null;
    spriteCanvas: lighttool.spriteCanvas | null = null;
    gittool: Gitee.RemoteTool = new Gitee.RemoteTool();

    start(): void
    {
        //root容器由外部提供
        this.root = document.getElementById("root") as HTMLDivElement;

        var imgs = this.root.getElementsByTagName("img");
        //clear body style
        // document.body.style.margin = "0px";
        // document.body.style.userSelect = "none";
        // document.body.style.msUserSelect = "none";
        // document.body.style.webkitUserSelect = "none";
        // document.body.style.overflow = "hidden";
        // //add a root div
        // let div = document.createElement("div");
        // div.style.width = "100%";
        // div.style.height = "100%";
        // div.style.background = "#000000FF";
        // div.style.position = "absolute";
        // document.body.appendChild(div);
        // this.root = div;

        this.rootCanvas = document.createElement("canvas");
        this.rootCanvas.style.position = "absolute";
        this.rootCanvas.style.width = "512px";
        this.rootCanvas.style.height = "256px";
        // this.rootCanvas.style.background = "#003300FF";
        this.root.appendChild(this.rootCanvas);


        window.addEventListener("resize", (ev: UIEvent) =>
        {
            this.ResizeCanvas();
        });



        this.spriteCanvas = lighttool.Native.canvasAdapter.CreateScreenCanvas(this.rootCanvas, 320, 240);
        this.spriteCanvas.SetUserAction(new MyGameAction(this.root, this.spriteCanvas));
        //手动加载接口
        lighttool.loadTool.loadText("shader/default.shader.txt?" + Math.random(), (txt, err) =>
        {
            if (txt != null && this.spriteCanvas != null)
                lighttool.shaderMgr.parserInstance().parseDirect(this.spriteCanvas.webgl, txt);
        }
        );

        this.ResizeCanvas();
        var btn = document.createElement("button");
        btn.innerText = "Login to GITEE";
        btn.style.zIndex = "2000";
        btn.onclick = () =>
        {
            this.root?.requestFullscreen();

            //     var div = this.showDialog();

            //     {
            //         var span = document.createElement("span")
            //         span.innerText = "username for gitee:"
            //         div.appendChild(span);
            //         var input = document.createElement("input");
            //         div.appendChild(input);
            //         div.appendChild(document.createElement("hr"));
            //     }
            //     {
            //         var span = document.createElement("span")
            //         span.innerText = "username for gitee:"
            //         div.appendChild(span);
            //         var pass = document.createElement("input");
            //         pass.type = "password";
            //         div.appendChild(pass);
            //         div.appendChild(document.createElement("hr"));
            //     }
            //     {
            //         let btn2 = document.createElement("button")
            //         btn2.innerText = "login"

            //         div.appendChild(btn2);
            //         div.appendChild(document.createElement("hr"));
            //         btn2.onclick = async () =>
            //         {
            //             var b = await this.gittool.Login_WithProxy(input.value, pass.value);
            //             if (b)
            //             {
            //                 console.warn("token=" + this.gittool.access_token);
            //                 this.closeDialog();
            //                 // let name = await this.gittool.GetUserName();
            //                 console.warn("gitee user is:" + this.gittool.userpath);
            //                 let repos = await this.gittool.GetOwnerRepositories();
            //                 if (repos != null)
            //                 {
            //                     this.ProcessRepos(repos);
            //                     for (var i in repos)
            //                     {
            //                         console.warn("gitee repos[" + i + "]=" + repos[i].html_url);
            //                     }
            //                 }
            //             }
            //         }
            //     }
        }
        this.root.appendChild(btn);
    }
    ResizeCanvas(): void
    {
        if (this.root == null)
            return;
        let div: HTMLDivElement = this.root;
        if (this.rootCanvas != null && this.spriteCanvas != null)
        {
            var wantwidth = this.spriteCanvas.width; //32
            var wantheight = this.spriteCanvas.height;//15
            var radio = wantwidth / wantheight;
            var radionow = div.clientWidth / div.clientHeight;
            var targetwidth = 0;
            var targetheight = 0;
            var targetx = 0;
            var targety = 0;
            if (radionow < radio)//超高了
            {
                targetwidth = div.clientWidth;
                targetheight = targetwidth / radio;
                targetx = 0;
                targety = ((div.clientHeight - targetheight) / 2) | 0;
            }
            else
            {
                targetheight = div.clientHeight;
                targetwidth = targetheight * radio;
                targety = 0;
                targetx = ((div.clientWidth - targetwidth) / 2) | 0;
            }

            this.rootCanvas.style.width = targetwidth.toString() + "px";
            this.rootCanvas.style.height = targetheight.toString() + "px";
            this.rootCanvas.style.left = targetx.toString() + "px";
            this.rootCanvas.style.top = targety.toString() + "px";
        }
    }
    reposs: HTMLElement[] = [];
    ProcessRepos(list: Gitee.Repos[]): void
    {
        for (var i in list)
        {
            let span = document.createElement("span")
            span.innerText = "repos" + list[i].path;

            this.root?.appendChild(span);
            let btn = document.createElement("button");
            btn.innerText = "Open it.";
            let repospath = list[i].path;
            btn.onclick = (s) =>
            {
                this.ClearRepos();
                this.OpenRepos(repospath)
            };
            this.root?.appendChild(btn);

            let hr = document.createElement("hr");
            this.root?.appendChild(hr);
            this.reposs.push(span);
            this.reposs.push(btn);
            this.reposs.push(hr);
        }
    }
    ClearRepos()
    {
        for (var i in this.reposs)
        {
            this.root?.removeChild(this.reposs[i]);
        }
        this.reposs.length = 0;

    }
    async OpenRepos(repospath: string): Promise<void>
    {
        var files = await this.gittool.GetRepositoriesFiles(repospath);
        if (files == null)
            return;
        let hr = document.createElement("hr");
        this.root?.appendChild(hr);
        this.reposs.push(hr);

        for (var i in files)
        {
            let file = files[i];
            let span = document.createElement("span");
            span.innerText = "type:" + file.type + "  path:" + file.path + "   sha:" + file.sha + "   url:" + file.download_url;
            this.root?.appendChild(span);
            this.reposs.push(span);


            if (file.type == "file")
            {
                let btn = document.createElement("button");
                btn.innerText = "delete file";
                btn.onclick = async (s) =>
                {
                    var b = await this.gittool.DeleteFile(repospath, file);
                    alert("b=" + b);
                };
                this.root?.appendChild(btn);

                this.reposs.push(btn);

            }

            let hr = document.createElement("hr");
            this.root?.appendChild(hr);
            this.reposs.push(hr);
        }
    }
    showDialog(): HTMLDivElement
    {
        if (this.divDialog != null)
            throw new Error("already have a dialog");
        var div = document.createElement("div");
        div.style.width = "100%";
        div.style.height = "100%";
        div.style.background = "#0000aaaa";
        div.style.position = "absolute";
        document.body.appendChild(div);
        this.divDialog = div;
        return div;
    }
    closeDialog(): void
    {
        if (this.divDialog != null)
        {
            document.body.removeChild(this.divDialog);
            this.divDialog = null;
        }
    }
}